<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
	#div1 {width: 150px; height: 200px ; left: -150px; background: green;position: absolute;}	
	#div1 span {position: absolute; width: 20px; height: 60px; line-height: 20px; background: blue; right: -20px; top: 70px;}
</style>
<script>
window.onload = function()
{
	 var oDiv=document.getElementById('div1');
	/* 其实用到了 冒泡
		var oSpan = oDiv.getElementsByTagName('span')[0];
	
	oSpan.onmouseover = function()
	{
		 console.log(9);
	};
	*/
		//oDiv.onmouseover = StartMove();
		oDiv.onmouseover=function ()
		{
			console.log(9);
			StartMove(0);
		};
	
	oDiv.onmouseout = function()
	{
			StartMove(-150);
	};
		 
		var timer = null;
		function StartMove( iTarget)
		{
				clearInterval(timer);

				timer = setInterval(
																function()
																		{ 
																			
																			var speed = 0;
																			if(oDiv.offsetLeft<iTarget)
																			{
																					speed=10;
																			}else
																			{
																					speed = -10;
																			}
																			
																				if(oDiv.offsetLeft==iTarget)
																				{
																					clearInterval(timer);
																				}
																			else
																				{
																					oDiv.style.left = oDiv.offsetLeft + speed + 'px';
																				}
																		},30);
		}
	
	
};


</script>
</head>

<body>
<div id="div1">
	<span>分享到</span>
</div>
</body>
</html>
